<script setup>
import { useRouter } from 'vue-router'
import { computed } from 'vue'
const SUCCESS_STATUS = ['TRADE_SUCCESS']
const FAIL_STATUS = ['TRADE_FAILED']
const router = useRouter()
const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
})
const statusLabel = computed(() => {
  if (SUCCESS_STATUS.includes(props.info.withdrawStatus)) {
    return '付款成功'
  } else if (FAIL_STATUS.includes(props.info.withdrawStatus)) {
    return '付款失败'
  } else {
    return '付款处理中'
  }
})
</script>

<template>
  <div
    class="withdraw-item fz-12"
    @click="router.push(`/payment/detail/${props.info.withdrawApplyNo}`)"
  >
    <p class="supplier-name">供应商名称: {{ props.info.payeeName }}</p>
    <div class="withdraw-item-info fz-14">
      <p>收款银行: {{ props.info.bankName }}（{{ props.info.cardNo }}）</p>
      <span
        :style="{
          color: FAIL_STATUS.includes(props.info.withdrawStatus)
            ? '#3F84F3'
            : SUCCESS_STATUS.includes(props.info.withdrawStatus)
            ? ''
            : '#FAA64E',
        }"
        >{{ statusLabel }}</span
      >
    </div>
    <div class="withdraw-item-price fz-16">
      <span
        ><span style="font-size: 0.18rem">{{
          $filters.formatMoney(props.info.withdrawAmount)
        }}</span>
        {{ props.info.withdrawCurrency }}</span
      >
      <span>
        <span style="font-size: 0.18rem">{{
          $filters.formatMoney(props.info.realReceiptAmount)
        }}</span>
        {{ props.info.realReceiptCurrency }}</span
      >
    </div>
    <div class="withdraw-item-desc">
      <span class="fz-14">付款金额</span>
      <span class="fz-14">实际到账金额</span>
    </div>
    <div class="withdraw-item-time fz-14">{{ props.info.gmtCreate }}</div>
  </div>
</template>

<style scoped lang="scss">
@mixin fhw() {
  @include fh;
  justify-content: space-between;
}

.withdraw-item {
  background: #fff;
  padding: 0.1rem 0.12rem;
  margin-top: 0.1rem;
  border-radius: 0.08rem;
  position: relative;
  color: #999;
  .supplier-name {
    font-size: 0.14rem;
    margin-bottom: 0.06rem;
  }
  &-info {
    @include fhw;
  }
  &-price {
    @include fh;
    color: #222;
    margin: 0.08rem 0 0.02rem;
    font-weight: bold;
    span {
      flex: 1;
    }
  }
  &-desc {
    @include fh;
    span {
      flex: 1;
    }
  }
  &-time {
    margin-top: 0.08rem;
  }
}
</style>
